<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Diamonds-infromation</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    img {
      vertical-align: middle;
    }

    a {
      text-decoration: none;
      color: black;
    }

    li {
      list-style: none;
    }

    .clear_float::before,
    .clear_float::after {
      content: "";
      display: table;
    }

    .clear_float::after {
      clear: both;
    }

    .diamonds {
      max-width: 1260px;
      margin: 0px auto;
    }

    .diamonds .content {
      width: 88.88889%;
      margin: 0 auto;
    }

    input {
      border-radius: 3px;
      outline: none;
      border: none;
    }

    div {
      font-size: 13px;
      font-weight: 300;
    }
  </style>
  <link rel="stylesheet" href="../css/information.css">
</head>

<body>
  <div class="diamonds" style="padding: 0 4%;">

    <div class="content clear_float" style="padding: 0 76px;min-width: 800px;">
      <!-- 左边部分 -->
      <div class="in_left">

        <!-- 头部 联系信息 -->
        <section class="in_sec1">
          <!-- logo和导航 -->
          <div class="clear_float">
            <a href="./index.html">
            <img src="../resource/images/7D-Logo---3_efb37a3b-ca32-456f-9747-ccbc0f94e66c.webp" alt="" class="logo">
            </a>
            <ul class="in_nav">
              <li><a href="./Cart.html"> Cart</a></li>
              <li> ＞ <a href="./information.html" style="font-weight: 600;"> Information</a></li>
              <li> ＞ <a href="./payment.html"> Payment</a></li>
            </ul>
          </div>

          <!-- 快速结账 -->
          <div>
            <div class="in_quickCheckout">
              <h4 class="in_quickCheckout_h">Express checkout</h4>
              <div class="in_quickCheckout_p">
                Express checkout isn't available right now.
                Try refreshing the page or fill out<br>
                your information to check out.
              </div>
              <p class="in_OR">OR</p>
              <hr>
            </div>

            <div class="in_contactinformation ">
              <div class="in_contactinformation_div clear_float">
                <h2 class="in_contactinformation_h"> Contact information
                </h2>
                <p class="in_contactinformation_p"> Already have an account?
                  <a href="./login.html">Log in</a>
                </p>
              </div>
              <div class="information">
                <input class="information_input" type="text" placeholder="Email(Required For Order Confirmation)">
              </div>
              <label>
                <input type="checkbox" class="in_information_checkbox">Receive New Product Info &
                Special Offers*
              </label>
            </div>
          </div>
        </section>

        <!-- 主体-收件地址 -->

        <section class="in_sec2 clear_float">
          <h2 class="in_sec2_h">Shipping address</h2>
          <!-- 浮动 -->
          <div class="clear_float">
            <div class="in_sec2_left1 information">
              <input class="information_input" type="text" placeholder="First name">
            </div>
            <div class="in_sec2_right1 information">
              <input class="information_input" type="text" placeholder="Last name">
            </div>
          </div>


          <!-- 地址 -->
          <div class="information" style="padding-bottom:10px;">
            <input class="information_input" type="text" placeholder="Company(optional)">
          </div>
          <div class="information" style="padding-bottom:10px;"><input class="information_input" type="text"
              placeholder="Address"></div>
          <div class="information" style="padding-bottom:10px;"><input class="information_input" type="text"
              placeholder="Apartment, suite, etc (optional)"></div>
          <div class="information" style="padding-bottom:10px;"><input class="information_input" type="text"
              placeholder="City"></div>

          <div class="in_sec2_div2">

            <!--下拉列表  -->
            <div class="in_dropdownlist clear_float " style="padding-bottom:10px;">


              <select name="select1" id="select1">
                <option value="1">United States</option>
                <option value="2">Canada</option>
                <option value="3">Australia</option>
                <option value="4">United Kingdom</option>
                <option value="5">Afghanistan</option>
                <option value="6">China</option>
                <option value="7">Central African Republic</option>
              </select>




              <select name="select2" id="select2">
                <option value="1">Alabama</option>
                <option value="2">Alaska</option>
                <option value="3">American Samoa</option>
                <option value="4">California</option>
                <option value="5">Delaware</option>
                <option value="6">Oklahoma</option>
                <option value="7">Micronesia</option>
              </select>

              <!-- 邮政编码 -->
              <div class="information"><input class="information_input" type="text" placeholder="ZIP code"></div>
            </div>

            <div class="information"><input class="information_input" type="tel" name="tel"
                placeholder="Phone(Required For Shipping Notification"></div>
            <button class="in_sec2_btn1"><img src="../resource/images/wenhao1.png" alt=""></button>
            <p class="in_sec2_p">In case we need to contact
              you about your order</p>
          </div>

          <!-- 服务条款和购买 -->
          <div>
            <label><input type="checkbox" class="in_information_checkbox"> Send me special offers through text*</label>
            <p style="font-size: 10px; padding: 10px 0;">
              *I agree to receive recurring automated marketing text messages
              (e.g. cart reminders) at the phone number provided. Consent is not
              a condition to purchase. Msg & data rates may apply. Msg frequency
              varies. Reply HELP for help and STOP to cancel.
              View our
              <a style="text-decoration:underline;" href="">Terms of Service</a>
              and<a style="text-decoration: underline;" href="">Privacy Policy</a>.
            </p>
            <label><input type="checkbox" class="in_information_checkbox"> Save this information for next time</label>
          </div>

          <!-- 返回和确认 -->
          <div class="in_sec2_div3">
            <a href="./Cart.html">＜ Return to cart</a>
            <a href="./payment.html">
              <button class="in_sec2_btn2">
                Continue to payment
              </button>
            </a>
          </div>
        </form>
        </section>


        <hr>

        <!-- 尾部 其他政策 -->



        <section class="in_sec3">
          <ul class="in_sec3_ul clear_float">
            <li><a href="">Refund policy</a></li>
            <li><a href="">Shipping policy</a></li>
            <li><a href="">Privacy policy</a></li>
            <li><a href="./login.html">My Account Login</a></li>
          </ul>
          <p class="in_sec3_p">
            *I agree to receive recurring automated text messages at the phone number provided. Consent is not a
            <br>
            condition to purchase. Msg & data rates may apply. Click to view our Terms of Service.
          </p>
        </section>

      </div>




      <!-- 右边部分 -->
      <section class="in_right">
        <!-- 购买的商品 -->
        <div class="clear_float in_sec3_div1">
          <img style="height: 65px;" src="../resource/images/mote.png" alt="商品图片">
          <span style="font-weight: 600;font-size: 14px;"> productName</span>
          <span class="in_sec3_span">＄ 125.00</span>
        </div>
        <hr>
        <!-- 申请折扣码 -->
        <form action="">
          <div class="information in_sec3-discount clear_float">
            <input class="information_input" type="text" placeholder="Gift card or discount code">
            <button class="in_sec3_btn"> Apply</button>
          </div>
        </form>
        <hr>
        <!-- 总价 -->
        <div class="clear_float in_sec3_div2" style="margin-top: 20px;">
          <span style="font-size: 16px;font-weight: 400;">Total</span>
          <span class="in_sec3_span3">＄ 125.00</span>
          <span class="in_sec3_span2">USD</span>
        </div>
      </section>






    <!-- 整体的div -->
  </div>
  </div>
</body>

</html>
